{% import _self as self_macro %}

<div class="col-md-8 footer-main clearfix">
  {{ self_macro.footer_div(firstColumnText|first, firstColumnLinks) }}
  {{ self_macro.footer_div(secondColumnText|first, secondColumnLinks) }}
  {{ self_macro.footer_div(thirdColumnText|first, thirdColumnLinks) }}
  {{ self_macro.footer_div(fourthColumnText|first, fourthColumnLinks) }}
  {{ self_macro.footer_div(fifthColumnText|first, fifthColumnLinks) }}
</div>

<div class="col-md-4 footer-logo hidden-sm hidden-xs">
  <a class="" href="{{ bottomLogo[0].href|default('') }}" target="{{ bottomLogo[0].target|default('') }}"><img src="{{ asset(bottomLogo[0].src|default('')) }}" alt="{{ bottomLogo[0].alt|default('') }}"></a>
  <div class="footer-sns">
    {% if (weibo[0].href) %}
    <a href="{{ weibo[0].href|default('javascript:;') }}" target="{{ weibo[0].target|default('') }}"><i class="es-icon es-icon-weibo"></i></a>
    {% endif %}
    {% if (weixin[0].src) %}
    <a class="qrcode-popover top">
      <i class="es-icon es-icon-weixin"></i>
      <div class="qrcode-content">
        <img src="{{ asset(weixin[0].src|default('')) }}" alt="">  
      </div>
    </a>
    {% endif %}
    {% if (apple[0].src) %}
    <a class="qrcode-popover top">
      <i class="es-icon es-icon-apple"></i>
      <div class="qrcode-content">
        <img src="{{ asset(apple[0].src|default('')) }}" alt=""> 
      </div>
    </a>
    {% endif %}
    {% if (android[0].src) %}
    <a class="qrcode-popover top">
      <i class="es-icon es-icon-android"></i>
      <div class="qrcode-content">
        <img src="{{ asset(android[0].src|default('')) }}" alt=""> 
      </div>
    </a>
    {% endif %}
  </div>
</div>


{% macro footer_div(title, links, className) %}
<div class="link-item {% if className %}{{className}}{% endif %}">
  <h3>{{ title.value|default('') }}</h3>
  <ul>
    {% for link in links|default(null) %}
      <li>
        <a href="{{ link.href }}" target="{{ link.target }}">{{ link.value }}</a>
      </li>
    {% endfor %}
  </ul>
</div>
{% endmacro %}